import React, { useEffect, useState } from 'react'
import api from '@/api'
import { Table, Button, message, Pagination, Card } from "antd"
import { getCommentType } from "@/type/comment"
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';
export default function ServeComment() {
  useEffect(() => {
    getservecom(query)
  }, [])
  interface commentresType {
    bei1?: string
    bei2?: string
    bei3?: string
    commodityid: number
    content: string
    createdAt: string
    id: number
    score: string
    updatedAt: string
    userid: number
  }
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  const [sercomlist, setSercomlist] = useState([])
  const [total, setTotal] = useState()
  const [query, setQuery] = useState<getCommentType>({
    pageSize: 6,
    currentPage: 1
  })
  const getservecom = async (params: any) => {
    const res = await api.comment.getAllComment(params)
    console.log("res", res.data);
    setTotal(res.data.total)
    setSercomlist(res.data.data)
  }
  const deletethis = async (arg: any) => {
    console.log(arg);
    const res = await api.comment.deleteComment({ id: arg.id })
    message.success(res.data.msg)
    getservecom(query)
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '商品id',
      dataIndex: 'commodityid',
      key: 'commodityid'
    },
    {
      title: '评价内容',
      dataIndex: 'content',
      key: 'content'
    },
    {
      title: '分数',
      dataIndex: 'score',
      key: 'score'
    },
    {
      title: '评价时间',
      dataIndex: 'createdAt',
      key: 'createdAt'
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (text, record, index) => (
        <label>
          <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} ></Button>
        </label>
      ),
    },
  ];
  function pageChange(args: any) {
    getservecom({ ...query, currentPage: args })
    setQuery({ ...query, currentPage: args })
  }
  return (
    <div>
      <Card>
        {
          sercomlist ? <>
            <Table dataSource={sercomlist} columns={columns} pagination={false} />
            <Pagination total={total} current={query.currentPage} pageSize={query.pageSize} onChange={pageChange}></Pagination>
          </> : <></>
        }
      </Card>
    </div>
  )
}
